<template>
    <el-row>
        <el-col :span="14" :offset="5">
            <div style="background-color: white; width:100%;">
                <el-table
                :data="
                    plug
                "
                style="width: 100%"
                max-height="640"
            >
                <el-table-column label="序号" prop="id" width="100%" />
                <el-table-column label="插件名" prop="name" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="mini" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin:7px 40%;height: 50px;">
                <el-button type="primary" @click="submit">提交</el-button>
                <br />
            </div>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { getCurrentInstance, reactive } from "vue";
const axios = getCurrentInstance().appContext.app.axios
const ElMessage = getCurrentInstance().appContext.config.globalProperties.$message
//获取插件
let plug = reactive([])
let search = reactive([])
//获取数据
axios.get('/api/plugin/check')
    .then((response) => {
        let id = 1
        let status = false
        for (let item of response.data.data) {
            if (response.data.data2.indexOf(item) === -1) {
                status = false
            }
            else {
                status = true
            }
            plug.push({
                id,
                name: item,
                status
            })
            id++
        }
    })
    .catch((error) => {
        ElMessage.error('获取数据失败')
        console.log(error)
    })
function submit() {
    //提交数据
    // console.log(plug)
    //生成数据
    let data = {
        Type: "plugin/change",
        data: []
    }
    for (let i = 0; i < plug.length; i++) {
        if (plug[i].status) {
            data.data.push(plug[i].name)
        }
    }
    //ajax post请求
    axios.post('/api/plugin/change', data)
        .then(() => {
            ElMessage({
                showClose: true,
                message: '提交成功',
                type: 'success'
            })
        })
        .catch(() => {
            ElMessage({
                showClose: true,
                message: '网络错误',
                type: 'error'
            })
        })
}
</script>

<style scoped>
</style>
